'use client';

import { Box, Container, Typography, Card, CardContent, CardActions, Button, Grid } from '@mui/material';
import { VideoCameraFrontOutlined } from '@mui/icons-material';
import { useRouter } from 'next/navigation';
import { useTheme } from '@mui/material/styles';

export default function AIInterview() {
  const router = useRouter();
  const theme = useTheme();

  return (
    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
        {/* 页面标题和介绍 */}
        <Box sx={{ mb: 6, textAlign: 'center' }}>
          <Typography variant="h3" component="h1" gutterBottom>
            AI 面试
          </Typography>
          <Typography variant="h6" color="text.secondary" sx={{ maxWidth: 800, mx: 'auto' }}>
            通过人工智能模拟真实面试场景，提前体验职场挑战，获取专业反馈
          </Typography>
        </Box>

        {/* AI面试卡片 */}
            <Card 
              sx={{ 
            maxWidth: 800,
            mx: 'auto',
            mb: 6,
            p: 4,
            borderRadius: 2,
            boxShadow: theme.shadows[3],
              }}
            >
          <CardContent sx={{ textAlign: 'center' }}>
            <VideoCameraFrontOutlined sx={{ fontSize: 80, color: theme.palette.primary.main, mb: 3 }} />
            
            <Typography variant="h4" component="h2" gutterBottom>
              智能模拟面试
                </Typography>
            
            <Typography variant="body1" sx={{ mb: 3 }}>
              选择您感兴趣的岗位，体验由 DeepSeek-V3 大模型驱动的真实面试情境。
              AI面试官将根据您的背景和简历，提出针对性的问题，助您提前适应真实面试场景。
                </Typography>
            
            <Box sx={{ 
              backgroundColor: theme.palette.background.paper, 
              p: 3, 
              borderRadius: 2,
              border: `1px solid ${theme.palette.divider}`,
              mb: 3
            }}>
              <Typography variant="h6" gutterBottom>
                AI面试流程
                </Typography>
              
              <Grid container spacing={2} sx={{ textAlign: 'left' }}>
                <Grid item xs={12} md={4}>
                  <Typography variant="subtitle1" fontWeight="bold">1. 选择岗位</Typography>
                  <Typography variant="body2">
                    从多个预设岗位中选择您想要挑战的面试类型
                </Typography>
                </Grid>
                <Grid item xs={12} md={4}>
                  <Typography variant="subtitle1" fontWeight="bold">2. 进行面试</Typography>
                  <Typography variant="body2">
                    与AI面试官进行实时文字交流，回答技术和行为问题
                </Typography>
                </Grid>
                <Grid item xs={12} md={4}>
                  <Typography variant="subtitle1" fontWeight="bold">3. 获取反馈</Typography>
                  <Typography variant="body2">
                    面试结束后获得专业评估和改进建议
                </Typography>
                </Grid>
              </Grid>
            </Box>
              </CardContent>
          
          <CardActions sx={{ justifyContent: 'center' }}>
                <Button 
                  variant="contained" 
                  size="large"
              onClick={() => router.push('/job-assistant/interviews')}
              sx={{ px: 4, py: 1.5, borderRadius: 2, fontSize: '1.1rem' }}
                >
              开始面试挑战
                </Button>
              </CardActions>
            </Card>
      </Container>
  );
}